<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录</title>
		<link rel="stylesheet"
		      href="css/bootstrap.min.css" />
		<style>
			.container{
				width: 300px;
			}
			.btn-success{
				background-color:lightcoral;
				border: lightcoral;
			}
			.btn-danger{
				background-color: #CCCCCC;
				border: #CCCCCC;
			}		  
		</style>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h2>用户登录</h2>
			<!--提示信息区:-->
			<div id="msg" style="display:none;">登录成功</div>
			
			<div class="form-group">
				<label>用户名:</label>
				<input class="form-control" 
					type="text" 
					id="name" name="name"
					autocomplete="off"
					placeholder="请输入用户名" />
	 		</div>
			<div class="form-group">
				<label>密码:</label>
				<input class="form-control" 
					type="password" 
					id="psw" name="psw"
					autocomplete="off" 
					placeholder="请输入密码" />
			</div>
			<div>
				<button class="btn btn-block btn-success" 
					id="btnSubmit" 
					onclick="doSubmit()">
					登录
				</button>
				<button class="btn btn-block btn-danger" 
					id="btnClear"
					onclick="doClear()">
					取消
				</button>
			</div>
		</div>
	</body>
	<script>
		function jsdoSubmit(){
			var name=document.getElementById("name");
			var psw=document.getElementById("psw");
			var msg=document.getElementById("msg");
			msg.innerText=name.value+"登陆成功";
			msg.style="display:block;color: white; padding: 10px; background-color:darkgreen";
			console.log("username:"+name.value),
			console.log("password:"+psw.value)
		}
		
		function jsdoClear(){
			document.getElementById("name").value="";
			document.getElementById("psw").value="";
		}
		//jq语法
		function doClear(){
				$("#name").val('');
				$("#psw").val('');
		}
		function doSubmit(){
			var name = $("#name");
			var psw = $("#psw");
			var msg = $("#msg");
			msg.text(name.val()+"登录成功");
			msg.css("display","block");
			msg.css("color", "white"); 
			msg.css("padding","5px");
			msg.css("padding-right","10px");
			msg.css("padding-left","10px");
			msg.css("background-color","#8AAA8A");
			msg.css("border","#4A8A4A");
			msg.css("margin-top","5px");
			msg.css("margin-bottom","5px");
			console.log("username:"+name.val());
			console.log("password:"+psw.val());
		}
	</script>

</html>
